 <template>
<div >
  <!--2.列表-->
  <el-table  v-loading="loading" element-loading-text="数据加载中" :data="tableData" :header-cell-style="{background:'#f0f0f0'}">
    <el-table-column  type="index" label="序号" width="50">
    </el-table-column>
    <el-table-column :label="item.label"  :width="item.width" v-for="(item,index) in column" :key="index" >
      <div slot-scope="scope" v-if="item.slotName" >
          <slot :data="scope.row" :name="item.slotName"></slot>
      </div>
      <div slot-scope="scope"v-else>
        {{scope.row[item.name]}}
      </div>
    </el-table-column>
    <el-table-column label="操作" >
      <div slot-scope="scope">
        <slot :row="scope.row" name="operate"></slot>
      </div>
    </el-table-column>
  </el-table>
  <!--3.分页-->
  <div style=" background-color: #ffffff;padding: 20px 10px;">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryData.pageNumber"
      :page-sizes="[10, 50, 100, 200]"
      :page-size="queryData.pageSize"
      layout=" total,sizes,->,jumper, prev, pager, next"
      :total="totalSize">
    </el-pagination>
  </div>
</div>
</template>

<script>

  export default {
		name:'BaseList',
		props:['listApi','queryData','column','parentComponentId'],
    data(){
		  return {
        tableData:[],
        totalSize:0,
        loading:false,


      }
    },
    mounted(){
		  this.dataList()
      this.$bus.$on(this.parentComponentId+'dataList',(data)=>{
         this. dataList()
      })
    },
    methods:{
      //列表
      dataList(){
        this.loading = true;
        this.listApi(this.queryData).then(resp => {
          this.tableData = resp.data;
          this.totalSize=  resp.totalSize;
        })
        // 完成赋值后，把加载状态赋值为false
        this.loading = false;
      },
      //分页
      handleSizeChange(val) {
        this.queryData.pageSize=val;
        this.dataList();
      },
      handleCurrentChange(val) {
        this.queryData.pageNumber=val;
        this.dataList();
      },

    },
    beforeDestroy() {
      this.$bus.$off(this.parentComponentId+'dataList')
    },
	}
</script>

<style scoped>

</style>
